import React from 'react';
// 需求：http://localhost:3000
// http://localhost:3000------------->首页
// http://localhost:3000/goodsList------------->商品列表
// http://localhost:3000/newsList------------->新闻列表
// http://localhost:3000/my------------->个人中心
// http://localhost:3000/aslkdjf;lsakdjf;lsakdf------------->404,您查看的界面不存在……
// http://localhost:3000/home------------->首页(重定向)
// 路由的流程：1- 确定路由模式  2- 指定路由所在的位置（路由需要放置到路由器中）
// 注意1：地址是不区分大小写（对大小写不敏感）
// 注意2：*代表的是：如果其它路由的地址不满足，那么会渲染path为*的路由
//       *可以写在Routes下的任意位置
//       如果出现两个相同的路由地址，只有第一个会渲染。
// 注意3：路由(Route)必须被Routes直接包裹。
// 注意4：Routes必须被Router所包裹，可以直接包裹也可以间接包裹。
import {
    BrowserRouter as Router,// 指定路由模式为history
    Route,// 路由，必须直接被Routes所包裹
    Routes,// 包裹路由
    Navigate
} from "react-router-dom";
function App(props) {
    return (
        <div>
           <Router>
               <div>
                   <Routes>
                       <Route path={"*"} element={<div>404，您找的页面不存在……</div>}></Route>
                       <Route path={"/"} element={<div>首页</div>}></Route>
                       <Route path={"/goodsList"} element={<div>商品列表1</div>}></Route>
                       <Route path={"/goodsList"} element={<div>商品列表2</div>}></Route>
                       <Route path={"/newsList"} element={<div>新闻列表</div>}></Route>
                       <Route path={"/my"} element={<div>个人中心</div>}></Route>
                       {/*重定向：当地址为/home,跳转至路由地址为/的路由中*/}
                       <Route path={"/home"} element={<Navigate to={"/"}/>}></Route>
                   </Routes>
               </div>

           </Router>
        </div>
    );
}

export default App;